<script setup>
  import { ref, onMounted } from 'vue'
  import echarts from '@/lib/echarts.js'
  import PChart from './chart/p.vue'

  const pie_chart = ref()

  const res = [
    {
      label: '男',
      value: 370
    },
    {
      label: '女',
      value: 263
    }
  ]

  const border =
    ''
  const man =
    ''
  const woman =
    ''
  const color = ['#00FFFF', 'rgba(196,36,255,1)']
  const data = []
  for (let i = 0; i < res.length; i++) {
    data.push(
      {
        value: res[i].value,
        name: res[i].label,
        itemStyle: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      },
      {
        value: res[0].value / 10,
        name: '',
        itemStyle: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    )
  }
  const option = {
    // backgroundColor: '#030c3b',
    backgroundColor: '#061740',
    color,
    graphic: {
      elements: [
        {
          type: 'image',
          z: 3,
          style: {
            image: border,
            width: 300,
            height: 300
          },
          left: 'center',
          top: 'center',
          position: [100, 100]
        },
        {
          type: 'image',
          z: 3,
          style: {
            image: man,
            width: 85,
            height: 120
          },
          left: '36%',
          top: 'center'
        },
        {
          type: 'image',
          z: 3,
          style: {
            image: woman,
            width: 85,
            height: 120
          },
          right: '36%',
          top: 'center'
        }
      ]
    },
    tooltip: {
      show: false
    },
    toolbox: {
      show: false
    },
    series: [
      {
        name: '',
        type: 'pie',
        clockwise: false,
        radius: [175, 180],
        // hoverAnimation: false,
        emphasis: {
          scale: false
        },
        label: {
          show: true,
          fontSize: 24,
          formatter(params) {
            return params.name ? params.name + '\n' + params.value + '人' : ''
          }
        },
        // labelLine: {
        //   width: 4,
        //   length: 30,
        //   length2: 50,
        //   show: true,
        //   color: '#00ffff'
        // },
        data
      }
    ]
  }

  let angle = 0 //角度，用来做简单的动画效果的
  let value = 55.33
  const option2 = {
    backgroundColor: '#061740',
    title: {
      text: '{a|' + value + '}{c|%}',
      x: 'center',
      y: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 48,
            color: '#29EEF3'
          },

          c: {
            fontSize: 20,
            color: '#ffffff'
            // padding: [5,0]
          }
        }
      }
    },
    legend: {
      type: 'plain',
      orient: 'vertical',
      right: 0,
      top: '10%',
      align: 'auto',
      data: [],
      textStyle: {
        color: 'white',
        fontSize: 16,
        padding: [10, 1, 10, 0]
      },
      selectedMode: false
    },
    series: [
      {
        name: 'ring5',
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((0 + angle) * Math.PI) / 180,
              endAngle: ((90 + angle) * Math.PI) / 180
            },
            style: {
              stroke: '#0CD3DB',
              fill: 'transparent',
              lineWidth: 1.5
            },
            silent: true
          }
        },
        data: [0]
      },
      {
        name: 'ring5',
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((180 + angle) * Math.PI) / 180,
              endAngle: ((270 + angle) * Math.PI) / 180
            },
            style: {
              stroke: '#0CD3DB',
              fill: 'transparent',
              lineWidth: 1.5
            },
            silent: true
          }
        },
        data: [0]
      },
      {
        name: 'ring5',
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((270 + -angle) * Math.PI) / 180,
              endAngle: ((40 + -angle) * Math.PI) / 180
            },
            style: {
              stroke: '#0CD3DB',
              fill: 'transparent',
              lineWidth: 1.5
            },
            silent: true
          }
        },
        data: [0]
      },
      {
        name: 'ring5',
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((90 + -angle) * Math.PI) / 180,
              endAngle: ((220 + -angle) * Math.PI) / 180
            },
            style: {
              stroke: '#0CD3DB',
              fill: 'transparent',
              lineWidth: 1.5
            },
            silent: true
          }
        },
        data: [0]
      },
      {
        name: 'ring5',
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 2
          let y0 = api.getHeight() / 2
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
          let point = getCirlPoint(x0, y0, r, 90 + -angle)
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: '#0CD3DB', //粉
              fill: '#0CD3DB'
            },
            silent: true
          }
        },
        data: [0]
      },
      {
        name: 'ring5', //绿点
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 2
          let y0 = api.getHeight() / 2
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
          let point = getCirlPoint(x0, y0, r, 270 + -angle)
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: '#0CD3DB', //绿
              fill: '#0CD3DB'
            },
            silent: true
          }
        },
        data: [0]
      },
      {
        name: '吃猪肉频率',
        type: 'pie',
        radius: ['58%', '45%'],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          position: 'center'
        },
        data: [
          {
            value: value,
            name: '',
            itemStyle: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: '#4FADFD' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#28E8FA' // 100% 处的颜色
                  }
                ]
              }
            }
          },
          {
            value: 100 - value,
            name: '',
            label: {
              show: false
            },
            itemStyle: {
              color: '#173164'
            }
          }
        ]
      },

      {
        name: '',
        type: 'gauge',
        radius: '58%',
        center: ['50%', '50%'],
        startAngle: 0,
        endAngle: 359.9,
        splitNumber: 8,
        emphasis: {
          scale: true
        },
        // hoverAnimation: true,
        axisTick: {
          show: false
        },
        splitLine: {
          length: 60,
          lineStyle: {
            width: 5,
            color: '#061740'
          }
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 0,
            name: ''
          }
        ]
      }
    ]
  }

  //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
    return {
      x: x1,
      y: y1
    }
  }

  function draw(myChart) {
    angle = angle + 3
    myChart.setOption(option2, true)
    //window.requestAnimationFrame(draw);
  }

  var img =
    ''
  var trafficWay = [
    {
      name: '优秀学生',
      value: 20
    },
    {
      name: '获得荣誉',
      value: 10
    },
    {
      name: '论文著作',
      value: 30
    }
  ]

  let data2 = []
  let color2 = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
  for (let i = 0; i < trafficWay.length; i++) {
    data2.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color2[i],
          shadowColor: color2[i]
        }
      },
      {
        value: 2,
        name: '',
        itemStyle: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    )
  }
  const seriesOption = [
    {
      name: '',
      type: 'pie',
      clockwise: false,
      radius: [105, 109],
      // hoverAnimation: false,
      emphasis: {
        scale: true
      },
      label: {
        show: true,
        position: 'outside',
        color: '#ddd',
        formatter: function (params) {
          let percent = 0
          let total = 0
          for (let i = 0; i < trafficWay.length; i++) {
            total += trafficWay[i].value
          }
          percent = ((params.value / total) * 100).toFixed(0)
          if (params.name !== '') {
            return params.name + '\n' + '\n' + '占百分比：' + percent + '%'
          } else {
            return ''
          }
        }
      },
      labelLine: {
        length: 30,
        length2: 100,
        show: true,
        color: '#00ffff'
      },
      data: data2
    }
  ]
  const option3 = {
    backgroundColor: '#061740',
    // backgroundColor: '#0A2E5D',
    color: color2,
    title: {
      text: 'xx市教学成果分析',
      top: '48%',
      textAlign: 'center',
      left: '49%',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: '400'
      }
    },
    graphic: {
      elements: [
        {
          type: 'image',
          z: 3,
          style: {
            image: img,
            width: 178,
            height: 178
          },
          left: 'center',
          top: 'center',
          position: [100, 100]
        }
      ]
    },
    tooltip: {
      show: false
    },
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      // x: 'left',
      data: ['优秀学生', '获得荣誉', '论文著作'],
      right: 250,
      bottom: 100,
      align: 'right',
      textStyle: {
        color: '#fff'
      },
      itemGap: 20
    },
    toolbox: {
      show: false
    },
    series: seriesOption
  }

  const pie2_chart = ref()
  const pie3_chart = ref()
  onMounted(() => {
    const pie = echarts.init(pie_chart.value, 'walden')
    pie.setOption(option)

    const pie2 = echarts.init(pie2_chart.value, 'walden')
    draw(pie2)

    setInterval(function () {
      //用setInterval做动画感觉有问题
      draw(pie2)
    }, 100)

    const pie3 = echarts.init(pie3_chart.value, 'walden')
    pie3.setOption(option3)
  })
</script>

<template>
  <div
    class="overflow-hidden"
    style="background-color: #061740; border-radius: 6px"
  >
    <div
      ref="pie_chart"
      class="h400px"
    />

    <div
      ref="pie2_chart"
      class="h400px"
    />

    <div
      ref="pie3_chart"
      class="h600px"
    />

    <PChart />
  </div>
</template>
